<template>
	<!-- 活动列表 -->
	<view class="activity-container">
		<!-- 自定义头部导航栏 -->
		<MyHeader>
			<!-- 标题 -->
			<template #title>
				<view>{{title}}</view>
			</template>
			<!-- 右侧图标 -->
			<template #right>
				<view style="width: 38rpx; height: 38rpx;" @click="show = true">
					<image style="width: 100%;" src="/static/img/activityList/btn.png" mode="widthFix"></image>
				</view>
			</template>
		</MyHeader>

		<!-- 内容区 -->
		<view class="content" v-if="activityList.length > 0">
			<view class="wrap" v-for="item in activityList" :key="item.month">
				<!-- 时间 -->
				<view class="month">
					{{item.month}}
				</view>
				<!-- 内容 -->
				<navigator class="item" v-for="ite in item.list" :key="ite.id"
					:url="'/pages/activityDetail/activityDetail?id='+ite.id">
					<view class="left">
						<!-- 标题 -->
						<view class="title">
							{{ite.name}}
						</view>
						<!-- 时间 -->
						<view class="time">
							开始时间：{{ite.start_at}}
						</view>
						<view class="time">
							结束时间：{{ite.end_at}}
						</view>
						<!-- 左下角区域 -->
						<view :class="ite.signup_status == 1?'type_blue':ite.signup_status == 2?'type_ash':'type_red'">
							{{ite.signup_status_show}}
						</view>
					</view>
					<!-- 图片 -->
					<view class="right">
						<image :src="ite.image_path" mode="widthFix"></image>
					</view>
				</navigator>
			</view>
		</view>

		<!-- 暂无活动 -->
		<view v-else style="width: 614rpx; height: 614rpx; margin: 268rpx auto 0;">
			<image src="/static/img/activityList/noActivity.png" mode="widthFix"></image>
		</view>

		<!-- 弹出框 -->
		<u-popup :show="show" round="40rpx" @close="show = false">
			<view class="popwrap">
				<!-- 筛选 -->
				<view class="popwrap-title">筛选</view>
				<view class="btnwrap">
					<view :class="status==1?'btnactive':'btn'" @tap="status=1">未开始</view>
					<view :class="status==2?'btnactive':'btn'" @tap="status=2">报名中</view>
					<view :class="status==3?'btnactive':'btn'" @tap="status=3">已结束</view>
				</view>
				<!-- 组织 -->
				<view class="popwrap-title" v-if="title!='组织活动'">组织</view>
				<u--input v-if="title!='组织活动'" placeholder="输入组织名称或关键字" border="none" v-model="key_word" fontSize="28rpx"
					shape="circle"
					:customStyle="{width:'100%', height:'80rpx', background:'rgba(153,153,153,.1)', padding:'0 28rpx',boxSizing:'border-box',marginTop:'28rpx'}"></u--input>
				<!-- 时间 -->
				<view class="popwrap-title">时间</view>
				<view class="datewrap">
					<picker class="time" mode="date" :value="sTime" @change="handlesTime">
						<view>{{sTime}}</view>
					</picker>
					<text>至</text>
					<picker class="time" mode="date" :value="eTime" @change="handleeTime">
						<view>{{eTime}}</view>
					</picker>
				</view>
				<!-- 提交 -->
				<view class="subwrap">
					<view class="reset" @tap="reset">重置</view>
					<view class="submit" @tap="submit">确定</view>
				</view>
			</view>
		</u-popup>


		<!-- 	<u-datetime-picker :show="sTimeFlag" v-model="sTime" mode="date" @confirm="handleTime" @cancel="sTimeFlag=false"
			:formatter="formatter" ref="datetimePicker"></u-datetime-picker>
		<u-datetime-picker :show="eTimeFlag" v-model="eTime" mode="date" @confirm="handleTime" @cancel="eTimeFlag=false"
			:formatter="formatter" ref="datetimePicker"></u-datetime-picker> -->
	</view>
</template>
<script>
	import MyHeader from '@/componets/MyHeader/MyHeader.vue'
	export default {
		data() {
			return {
				title: '活动报名',
				// 活动列表
				activityList: [],
				// 弹出层开关
				show: false,
				// 状态
				status: '',
				// 关键字
				key_word: '',
				// 开始时间
				sTime: '开始时间',
				// 结束时间
				eTime: '结束时间',
			}
		},
		onLoad(options) {
			if (!options.detail || !options.title) return this.getActivityList()
			this.activityList = JSON.parse(options.detail)
			this.title = options.title
		},
		methods: {

			/**
			 * 重置
			 */
			reset() {
				this.status = ''
				this.key_word = ''
				this.sTime = '开始时间'
				this.eTime = '结束时间'
				this.getActivityList()
			},

			/**
			 * 搜索的方法
			 */
			submit() {
				if (this.title == '组织活动') return
				this.getActivityList()
				this.show = false
			},

			/**
			 * 点击开始时间
			 * @param {object} e 具体参数内容
			 */
			handlesTime(e) {
				this.sTime = e.detail.value
			},

			/**
			 * 点击结束时间
			 * @param {object} e 具体参数内容
			 */
			handleeTime(e) {
				this.eTime = e.detail.value
			},

			/**
			 * 获取活动列表
			 */
			getActivityList() {
				if (this.title == '组织活动') return
				this.activityList = []
				this.$request.post({
					url: '/api/activity/list',
					data: {
						signup_status: this.status,
						key_word: this.key_word,
						start_at: this.sTime == '开始时间' ? '' : this.sTime,
						end_at: this.eTime == '结束时间' ? '' : this.eTime
					},
					success: res => {
						if (res.code != 200) return uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						this.activityList = res.result
					}
				})
			}
		},
		components: {
			MyHeader
		}
	}
</script>

<style lang="less" scoped>
	.activity-container {
		width: 100%;
		min-height: 100vh;
		background-color: #fff;
		padding-bottom: 98rpx;

		.content {
			width: 100%;
			min-height: 100vh;
			background: #F6F6F6;
			padding: 0 20rpx;
			box-sizing: border-box;
			overflow: hidden;

			.month {
				margin-top: 20rpx;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #333333;
				line-height: 28rpx;
				letter-spacing: 1px;
			}

			.item {
				width: 710rpx;
				height: 240rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				margin-top: 20rpx;

				display: flex;
				align-items: center;
				padding: 20rpx;
				box-sizing: border-box;
				position: relative;

				.left {
					flex: 1;
					height: 100%;
					margin-right: 50rpx;
					overflow: hidden;

					.title {
						width: 100%;
						font-size: 32rpx;
						font-family: Source Han Sans CN-Medium, Source Han Sans CN;
						font-weight: 500;
						color: #333333;
						line-height: 46rpx;
						margin-top: 4rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						margin-bottom: 30rpx;
					}

					>.time {
						width: 100%;
						font-size: 24rpx;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						color: #9C9C9C;
						line-height: 34rpx;
						margin-top: 8rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.type_ash,
					.type_red,
					.type_blue {
						width: 140rpx;
						height: 48rpx;
						background: rgba(39, 91, 168, 0.2);
						border-radius: 0rpx 16rpx 0rpx 16rpx;
						position: absolute;
						left: 0;
						bottom: 0;
						font-size: 24rpx;
						font-family: Source Han Sans CN-Medium, Source Han Sans CN;
						font-weight: 500;
						color: #275BA8;
						line-height: 34rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}

					.type_red {
						background: rgba(234, 0, 0, 0.2);
						color: #EA0000;
					}

					.type_ash {
						background: rgba(102, 102, 102, 0.2);
						color: #666666;
					}
				}

				.right {
					width: 200rpx;
					height: 200rpx;
					border-radius: 20rpx;
					overflow: hidden;

					>image {
						width: 100%;
					}
				}
			}


		}

		.popwrap {
			width: 100%;
			padding: 0 40rpx;
			box-sizing: border-box;
			overflow: hidden;

			&-title {
				font-size: 28rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #333333;
				line-height: 42rpx;
				margin-top: 40rpx;
			}

			.btnwrap {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 28rpx;

				.btnactive {
					width: 202rpx;
					height: 80rpx;
					background: rgba(39, 91, 168, 0.1);
					border-radius: 999rpx;
					opacity: 1;
					border: 2rpx solid #275BA8;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 28rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #275BA8;
					line-height: 42rpx;
				}

				.btn {
					width: 202rpx;
					height: 80rpx;
					background: rgba(153, 153, 153, .1);
					border-radius: 999rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 28rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #999999;
					line-height: 42rpx;
				}
			}

			.datewrap {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 28rpx;

				>.time {
					width: 280rpx;
					height: 80rpx;
					background: rgba(153, 153, 153, .1);
					border-radius: 999rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 28rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #999999;
					line-height: 28rpx;
					letter-spacing: 1px;
				}

				>text {
					font-size: 28rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #333333;
					line-height: 28rpx;
					letter-spacing: 1px;
				}
			}

			.subwrap {
				width: 100%;
				height: 92rpx;
				display: flex;
				align-items: center;
				border-top: 2rpx solid #f1f1f1;
				margin-top: 48rpx;

				.reset {
					flex: 1;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 28rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #333333;
					line-height: 104rpx;
					border-right: 2rpx solid #f1f1f1;
				}

				.submit {
					flex: 1;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 28rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #275BA8;
					line-height: 72rpx;
				}
			}
		}
	}
</style>